import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { UserCircleO } from "@react-vant/icons";
type Props = {};

function My({}: Props) {
  const navigate = useNavigate();
  const logins = () => {
    navigate("/login");
  };
  const regs = () => {
    navigate("/register");
  };
  const token = localStorage.getItem("token");
  console.log(token, "11111111");

  return (
    <div className="box">
      <div className="tops">
        <div style={{ height: "80px" }}></div>
        {token ? (
          <div className="toplosd">
            <div className="cond">
              <p>
                <span style={{ fontSize: "40px" }}>
                  <UserCircleO />
                </span>
                <b
                  style={{
                    float: "right",
                    lineHeight: "43px",
                    fontSize: "18px",
                    marginLeft: "20px",
                  }}
                >
                  13064826532
                </b>
              </p>
              <p>
                <span
                  style={{
                    fontSize: "15px",
                    color: "#fff",
                    float: "left",
                    lineHeight: "43px",
                  }}
                >
                  切换账号
                </span>
                <span
                  style={{
                    fontSize: "25px",
                    color: "#eee",
                    float: "right",
                    lineHeight: "43px",
                  }}
                >
                  {">"}
                </span>
              </p>
            </div>
          </div>
        ) : (
          <div className="toplos">
            <dl>
              <dt style={{ fontSize: "50px" }}>
                <UserCircleO />
              </dt>
              <dd style={{ margin: "-10px" }}>
                <span onClick={logins}>登录</span>
                <b style={{ fontSize: "17px" }}>/</b>
                <span onClick={regs}>注册</span>
              </dd>
            </dl>
          </div>
        )}
      </div>

      <div className="bottom">
        <div style={{ height: "20px" }}></div>
        <div className="con1">
          <p>
            <svg
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1893"
              width="30"
              height="30"
            >
              <path
                d="M833.828571 43.885714a87.771429 87.771429 0 0 1 87.771429 87.771429v760.671086a87.771429 87.771429 0 0 1-87.771429 87.771428H248.685714a87.771429 87.771429 0 0 1-87.771428-87.771428v-146.285715h58.499657l0.014628 117.028572a58.514286 58.514286 0 0 0 55.588572 58.441143L277.942857 921.6h526.628572a58.514286 58.514286 0 0 0 58.441142-55.588571l0.073143-2.925715v-702.171428a58.514286 58.514286 0 0 0-58.514285-58.514286H277.942857a58.514286 58.514286 0 0 0-58.441143 55.6032L219.428571 160.914286l-0.014628 117.013943H160.914286V131.657143a87.771429 87.771429 0 0 1 87.771428-87.771429h585.142857zM248.685714 658.285714a29.257143 29.257143 0 0 1 0 58.514286H131.657143a29.257143 29.257143 0 0 1 0-58.514286h117.028571z m-29.271771-87.786057v58.514286H160.914286v-58.514286h58.499657z m29.257143-87.7568a29.257143 29.257143 0 0 1 0 58.514286H131.657143a29.257143 29.257143 0 0 1 0-58.514286h117.028571z m-29.257143-87.786057v58.514286H160.914286v-58.514286h58.499657z m29.257143-87.7568a29.257143 29.257143 0 0 1 0 58.514286H131.657143a29.257143 29.257143 0 0 1 0-58.514286h117.028571z"
                fill="#697EFF"
                p-id="1894"
              ></path>
              <path
                d="M555.885714 248.685714c78.599314-0.731429 143.184457 62.537143 146.183315 142.218972l0.1024 4.139885a148.918857 148.918857 0 0 1-49.693258 109.7728c70.656 34.889143 120.100571 107.710171 122.733715 192.8192l0.1024 4.637258c-0.043886 3.349943-0.146286 6.670629-0.336457 9.976685a29.257143 29.257143 0 0 1-58.104686 6.729143L716.8 716.8h-0.863086c0.351086-3.3792 0.585143-6.787657 0.731429-10.24l0.131657-4.271543C715.439543 613.522286 645.705143 542.368914 560.040229 541.257143H555.885714c-86.162286-1.170286-157.242514 68.564114-160.797257 156.730514l-0.117028 4.286172c0.087771 4.900571 0.365714 9.728 0.863085 14.511542H394.971429a29.257143 29.257143 0 1 1-58.177829-4.432457l0.131657 2.121143-0.160914-2.633143c-0.087771-1.6384-0.146286-3.2768-0.2048-4.944457L336.457143 702.288457c0.863086-87.113143 50.7904-161.982171 122.733714-197.514971a148.567771 148.567771 0 0 1-49.488457-105.589029L409.6 395.044571c0.804571-81.642057 66.296686-147.163429 146.271086-146.344228H555.885714z m0 58.514286c-46.665143-0.629029-85.226057 36.878629-87.6544 84.494629l-0.117028 3.335314c0.804571 48.0256 38.2976 86.571886 84.538514 87.683657L555.885714 482.742857c46.621257 0.643657 85.152914-36.790857 87.6544-84.362971l0.117029-3.335315c-0.731429-48.069486-38.253714-86.674286-84.523886-87.800685L555.885714 307.2z"
                fill="#4DEDFD"
                p-id="1895"
              ></path>
            </svg>
            <span style={{ float: "right", margin: " 0 0 0 10px" }} onClick={()=>{ 
               navigate('/passenger')
            }}>
              常用联系人
            </span>{" "}
          </p>
          <span style={{ fontSize: "30px", color: "#ccc" }}>{">"}</span>
        </div>
        <div style={{ height: "20px" }}></div>
        <div className="con2">
          <p>
            <svg
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2324"
              width="30"
              height="30"
            >
              <path
                d="M845.630718 1024h-667.261436A105.619872 105.619872 0 0 1 72.872562 918.492084V180.518849A105.619872 105.619872 0 0 1 178.369282 75.010933h667.261436a105.619872 105.619872 0 0 1 105.49672 105.507916V918.492084a105.619872 105.619872 0 0 1-105.49672 105.507916zM178.369282 130.989242a49.585586 49.585586 0 0 0-49.518412 49.529607V918.492084a49.585586 49.585586 0 0 0 49.518412 49.529608h667.261436a49.585586 49.585586 0 0 0 49.518412-49.529608V180.518849A49.585586 49.585586 0 0 0 845.630718 130.989242z"
                fill="#4070DB"
                p-id="2325"
              ></path>
              <path
                d="M268.662293 424.875361h486.675414"
                fill="#FFFFFF"
                p-id="2326"
              ></path>
              <path
                d="M755.337707 452.864515H268.662293a27.989154 27.989154 0 0 1 0-55.978308h486.675414a27.989154 27.989154 0 0 1 0 55.978308z"
                fill="#4070DB"
                p-id="2327"
              ></path>
              <path
                d="M323.879297 604.610513h376.241406"
                fill="#FFFFFF"
                p-id="2328"
              ></path>
              <path
                d="M700.087116 632.599668h-376.174232a27.989154 27.989154 0 0 1 0-55.978309h376.174232a27.989154 27.989154 0 0 1 0 55.978309z"
                fill="#4070DB"
                p-id="2329"
              ></path>
              <path
                d="M268.662293 784.33447h486.675414"
                fill="#FFFFFF"
                p-id="2330"
              ></path>
              <path
                d="M755.337707 812.33482H268.662293a27.989154 27.989154 0 1 1 0-55.978308h486.675414a27.989154 27.989154 0 1 1 0 55.978308z"
                fill="#4070DB"
                p-id="2331"
              ></path>
              <path
                d="M300.872212 0m44.782647 0l0 0q44.782647 0 44.782646 44.782647l0 127.630543q0 44.782647-44.782646 44.782647l0 0q-44.782647 0-44.782647-44.782647l0-127.630543q0-44.782647 44.782647-44.782647Z"
                fill="#4070DB"
                p-id="2332"
              ></path>
              <path
                d="M633.562495 0m44.782646 0l0 0q44.782647 0 44.782647 44.782647l0 127.630543q0 44.782647-44.782647 44.782647l0 0q-44.782647 0-44.782646-44.782647l0-127.630543q0-44.782647 44.782646-44.782647Z"
                fill="#4070DB"
                p-id="2333"
              ></path>
            </svg>
            <span style={{ float: "right", margin: " 0 0 0 10px" }}>
              我的订单
            </span>{" "}
          </p>
          <span style={{ fontSize: "30px", color: "#ccc" }}>{">"}</span>
        </div>
        <div style={{ height: "20px" }}></div>
        <div className="con3">
          <p>
            <svg
              className="icon"
              viewBox="0 0 1032 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2180"
              width="30"
              height="30"
            >
              <path
                d="M224.9168 398.048c39.7488-125.5296 157.3104-216.7488 295.8816-216.7488 138.4704 0 256.032 91.2192 295.8768 216.7488h51.5616c-41.4384-153.1872-181.5024-266.2512-347.5248-266.2512-165.936 0-306 113.064-347.3424 266.2512h51.5472z"
                fill="#4887ED"
                p-id="2181"
              ></path>
              <path
                d="M205.5104 737.2352h-1.3056c-74.6256 0-135.288-60.6576-135.288-135.2832v-77.6256c0-74.6256 60.6624-135.288 135.288-135.288h1.2192c36.3744 0 65.8992 29.5296 65.8992 65.904v216.4704c0 36.288-29.5248 65.8224-65.8128 65.8224z"
                fill="#639DF6"
                p-id="2182"
              ></path>
              <path
                d="M204.2048 441.2672c-45.744 0-82.968 37.2192-82.968 82.968v77.6256c0 45.7488 37.224 82.968 82.968 82.968h1.3056a13.5696 13.5696 0 0 0 13.5024-13.5024V454.8608a13.608 13.608 0 0 0-13.5936-13.5936h-1.2144z"
                fill="#8EB7FE"
                p-id="2183"
              ></path>
              <path
                d="M834.0176 737.2352h-1.3056c-36.288 0-65.8128-29.5248-65.8128-65.8128V454.8608c0-36.3744 29.5248-65.8992 65.8992-65.8992h1.2192c74.6256 0 135.288 60.6576 135.288 135.2832v77.6304c0.0864 74.6112-60.6624 135.36-135.288 135.36z"
                fill="#639DF6"
                p-id="2184"
              ></path>
              <path
                d="M832.7984 441.2672a13.608 13.608 0 0 0-13.5936 13.5936v216.4752a13.5696 13.5696 0 0 0 13.5024 13.5024h1.3056c45.7488 0 82.968-37.2192 82.968-82.9632V524.24c0-45.744-37.2192-82.9632-82.968-82.9632h-1.2192v-0.0096z"
                fill="#8EB7FE"
                p-id="2185"
              ></path>
              <path
                d="M566.0816 877.5776h-4.776c-14.4432-0.1872-25.968-12.1008-25.7808-26.5296a26.1456 26.1456 0 0 1 26.1504-25.7808h0.3744c155.0688 2.256 248.3424-127.8768 249.288-129.1872a26.2512 26.2512 0 0 1 36.4704-6.3696 26.1456 26.1456 0 0 1 6.4704 36.3696c-4.512 6.1872-108.1056 151.4976-288.1968 151.4976z"
                fill="#4887ED"
                p-id="2186"
              ></path>
            </svg>
            <span style={{ float: "right", margin: " 0 0 0 10px" }}>
              客服中心
            </span>{" "}
          </p>
          <span style={{ fontSize: "30px", color: "#ccc" }}>{">"}</span>
        </div>
      </div>
    </div>
  );
}

export default My;
